<template>
  <div class="container">
    <h1>常用语设置</h1>
    <div class="template">
      <h2 class="title">
        邀请语模板设置
      </h2>
      <ul class="temContent">
        <li v-for='item in temData' :key='item.id'>
          <div class="flex-s">
            <span class="label">{{item.title}}:</span>
            <span :class="{'setBlue':i.includes('#')}"
              v-for='(i,index) in item.invitContent?item.invitContent.match(reg):[]' :key='index'>{{i}}</span>
          </div>
          <span v-if='item.templateId'>默认模板</span>
          <el-button v-else type="text" @click="setDefault(item.id)">设为默认</el-button>
        </li>
      </ul>
      <div class="customize" v-if='customize'>
        <div class="btnBox">
          <div class="flex-s">
            <span class="label">自定义模板：</span>
            <div ref="diyTem" class="diyTem"></div>
          </div>
          <div class="updateBox">
            <el-button class="update" @click="update">修改</el-button>
            <el-button class="del" @click="delTem">删除</el-button>
            <span class="text" v-if='customize.templateId'>默认模板</span>
            <button v-else class="default" @click="setDefault(customize.id)">设为默认</button>
          </div>
        </div>
        <diy v-show="addTem" :customize='customize' :flag='addTem' @close='handleClose'></diy>
      </div>
      <div v-else class="customize">
        <div class="btnBox">
          <span class="diyLabel"><i class="el-icon-sunny"></i>添加系统模版最高字数200个。</span>
          <el-button type="primary" @click="addTem=true" width='100px'>添加</el-button>
        </div>
        <diy v-show="addTem" :customize='customize' :flag='addTem' @close='handleClose'></diy>
      </div>
    </div>
    <h3>默认模板预览示例</h3>
    <div class="examples">
      <img src="../../../assets/img/exp.png" alt="">
      <i></i>
      <p>张三，您好，我们 {{companyName}} 诚聘【 开发工程师 】 10K~20K ，方便聊聊吗？</p>
    </div>
    <reply></reply>
  </div>
</template>

<script>
// 常用语组件
import reply from './components/reply.vue'
// 自定义模板编辑组件
import diy from './components/diyTem.vue'
import { inviteList, inviteDel, inviteStatus, inviteUpdate, editInfo, inviteSave } from '../../../api/commonWords'
export default {
  name: 'commonWords',
  data () {
    return {
      reg: /(#(\S*)#)|(\S*)/g, // 解析自定义模板正则
      customize: null, // 自定义模板
      companyName: '',
      temData: [],
      temContent: '',
      addTem: false
    }
  },
  components: {
    reply,
    diy
  },
  created () {
    this.templateList()
    this.companyName = localStorage.getItem('ep_companyName')
    // console.log(this.companyName);
  },
  methods: {
    // 获取模板列表
    templateList () {
      inviteList().then(res => {
        if (res.success) {
          this.temData = res.data || []
          if (this.temData[5]) {
            this.customize = this.temData[5];
            this.temData.pop();
          }
          // console.log(this.customize.invitContent);
          if (this.customize) {
            this.$nextTick(() => {
              this.init(this.customize.invitContent);
            })
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 打开修改出口
    update () {
      this.addTem = true;
    },
    // 解析模板字符串
    init (txt) {
      this.$refs.diyTem.innerHTML = ''
      let ary = txt.match(this.reg)
      ary.forEach(i => {
        if (i.includes('#')) {
          let text = document.createElement('span');
          text.style.color = '#0093FF'
          text.innerHTML = ' ' + i;
          this.$refs.diyTem.appendChild(text);
          console.log(i);
        } else {
          console.log(this.$refs);
          this.$refs.diyTem.innerHTML += i;
        }
        this.num = ary.join('').length;
      });
    },
    // 删除自定义模板
    delTem () {
      this.$confirm('您要删除模板，删除后不可恢复，是否确定操作？', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            // let formData = new FormData();
            // formData.append('ids', JSON.stringify(query))'1,2,32,2'
            inviteDel(this.customize.id).then(res => {
              if (res.success) {
                this.$message.success('删除成功')
                this.customize = null;
                this.addTem = false;
                this.templateList();
              } else {
                this.$message.error(`${res.msg}`)
              }
            })
          }
        }
      })
    },
    // 关闭编辑模板
    handleClose (val) {
      this.addTem = val;
      this.templateList();
    },
    // 设置默认模板
    setDefault (id) {
      this.$confirm('您要设置默认模板，是否确定操作？', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            // let formData = new FormData();
            // formData.append('ids', JSON.stringify(query))'1,2,32,2'
            inviteStatus(id, 1).then(res => {
              if (res.success) {
                this.$message.success('设置成功')
                this.templateList();
              } else {
                this.$message.error(`${res.msg}`)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.container {
    padding: 0;
    padding-bottom: 20px;
    border: none;
}
.template {
    padding: 23px 43px;
}
h1 {
    padding: 0 45px;
    height: 69px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 69px;
    color: rgba(34, 34, 34, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
h2 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
h2:after {
    display: block;
    content: '';
    width: 28px;
    height: 2px;
    margin-top: 4px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
h3 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin: 28px 43px 12px;
}
.examples {
    padding: 36px 30px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: row;
    width: 1111px;
    background: rgba(242, 247, 249, 1);
    box-sizing: border-box;
    opacity: 1;
}
.examples img {
    width: 32px;
    height: 32px;
}
.examples p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 44px;
    padding: 0 10px;
    color: rgba(34, 34, 34, 1);
    background: rgba(177, 222, 255, 1);
    opacity: 1;
    border-radius: 4px;
    margin-left: 14px;
}
.text {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.examples i {
    display: block;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(177, 222, 255, 1) transparent transparent;
    position: absolute;
    left: 66px;
    top: 40px;
    opacity: 1;
}
.temContent li {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    display: flex;
    justify-content: space-between;
    line-height: 49px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.customize {
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.btnBox {
    line-height: 49px;
    display: flex;
    justify-content: space-between;
}
.btnBox .el-button {
    margin-top: 12px;
    width: 94px;
    height: 24px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.label {
    display: block;
    width: 100px;
}
.setBlue {
    color: #0093ff;
}

.el-tag {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(0, 147, 255, 1);
    height: 24px;
    opacity: 1;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 16px;
    box-sizing: border-box;
    line-height: 14px;
}
.saveBox {
    text-align: right;
}
.saveBox .el-button {
    width: 100px;
}
.diyLabel {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(117, 117, 117, 1);
    opacity: 1;
}
.invitInfo {
    width: 100%;
}
.el-button {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    opacity: 1;
}
.updateBox /deep/ .update {
    padding: 0;
    cursor: pointer;
    margin-right: 8px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    color: rgba(0, 147, 255, 1);
    width: 48px;
    height: 22px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.updateBox /deep/ .del {
    cursor: pointer;
    padding: 0;
    margin-right: 16px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    color: rgba(253, 78, 64, 1);
    width: 48px;
    height: 22px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(253, 78, 64, 1);
    opacity: 1;
    border-radius: 2px;
}
.default {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
}
.el-icon-sunny {
    margin-right: 9px;
}
.flex-s {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 880px;
}
.diyTem {
    width: 780px;
}
</style>